<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>添加课表</title>
<meta name="renderer" content="webkit">	
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">	
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">	
<meta name="apple-mobile-web-app-status-bar-style" content="black">	
<meta name="apple-mobile-web-app-capable" content="yes">	
<meta name="format-detection" content="telephone=no">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/index.css">
<link rel="stylesheet" href="css/table.css">
<link rel="stylesheet" href="css/calendar.css">
</head>
<body>
<div class="content-head">悦宝园会员管理系统</div>
<div class="content-main">
	<div class="side-nav" ms-controller="navBar">
		<ul class="nav-item">
			<li><a href="main.html" class="nav-item-front nav-item-add">首页</a></li>
			<li ms-for="el in @navTitleArr">
				<a href="javascript:;" class="nav-item-front">{{el.par}}</a>
				<dl class="nav-item-child">
					<dd ms-for="($index, ex) in el.child"><a ms-attr='{href: el.href[$index]}'>{{ex}}</a></dd>
				</dl>
			</li>
		</ul>
	</div>
	<div class="content bg-gray" ms-controller="main">
		<div class="tab-content">
			<div class="tab-item">
				<div class="sub-main">
					<p class="sub-title"><i>添加课表</i></p>
					<div>
						<div class="week_content">
							<div class="week_title" id="week_title" ids="0">
								<a href="javascript:void(0)" id="prevWeek"></a>
								<h1 id="showDate"></h1>
								<a href="javascript:void(0)" id="nextWeek" class="nextWeek"></a>
							</div>
							<div class="week_box">
								<ul class="clear" id="weekUl"></ul>
							</div>
							<div class="calendar_box clear" id="calendarBox"></div>
						</div>
					</div>
					<div class="schedule-body" id="scheduleBody">
						<div class="schedule-btns">
							<a href="javascript:;" id="addSubmit">添加课表</a>
						</div>
						<div style="background: #fff; border-top: 1px solid #ccc;">
							<div class="schedule-line">
								<div class="schedule-block">时间</div>
								<div class="schedule-block">GYM</div>
								<div class="schedule-block">MUSIC</div>
								<div class="schedule-block">ART</div>
							</div>
							<div class="schedule-line">
								<div class="schedule-block">11:15</div>
								<div class="schedule-block schedule-in" data-time="11:15" data-type="gym">{{ag}}</div>
								<div class="schedule-block schedule-in" data-time="11:15" data-type="music">{{am}}</div>
								<div class="schedule-block schedule-in" data-time="11:15" data-type="art">{{aa}}</div>
							</div>
							<div class="schedule-line">
								<div class="schedule-block">12:15</div>
								<div class="schedule-block schedule-in" data-time="12:15" data-type="gym">{{bg}}</div>
								<div class="schedule-block schedule-in" data-time="12:15" data-type="music">{{bm}}</div>
								<div class="schedule-block schedule-in" data-time="12:15" data-type="art">{{ba}}</div>
							</div>
							<div class="schedule-line">
								<div class="schedule-block">13:15</div>
								<div class="schedule-block schedule-in" data-time="13:15" data-type="gym">{{cg}}</div>
								<div class="schedule-block schedule-in" data-time="13:15" data-type="music">{{cm}}</div>
								<div class="schedule-block schedule-in" data-time="13:15" data-type="art">{{ca}}</div>
							</div>
							<div class="schedule-line">
								<div class="schedule-block">16:00</div>
								<div class="schedule-block schedule-in" data-time="16:00" data-type="gym">{{dg}}</div>
								<div class="schedule-block schedule-in" data-time="16:00" data-type="music">{{dm}}</div>
								<div class="schedule-block schedule-in" data-time="16:00" data-type="art">{{da}}</div>
							</div>
							<div class="schedule-line">
								<div class="schedule-block">17:00</div>
								<div class="schedule-block schedule-in" data-time="17:00" data-type="gym">{{eg}}</div>
								<div class="schedule-block schedule-in" data-time="17:00" data-type="music">{{em}}</div>
								<div class="schedule-block schedule-in" data-time="17:00" data-type="art">{{ea}}</div>
							</div>
							<div class="schedule-line">
								<div class="schedule-block">17:30</div>
								<div class="schedule-block schedule-in" data-time="17:30" data-type="gym">{{fg}}</div>
								<div class="schedule-block schedule-in" data-time="17:30" data-type="music">{{fm}}</div>
								<div class="schedule-block schedule-in" data-time="17:30" data-type="art">{{fa}}</div>
							</div>
							<div class="schedule-line">
								<div class="schedule-block">18:00</div>
								<div class="schedule-block schedule-in" data-time="18:00" data-type="gym">{{jg}}</div>
								<div class="schedule-block schedule-in" data-time="18:00" data-type="music">{{jm}}</div>
								<div class="schedule-block schedule-in" data-time="18:00" data-type="art">{{ja}}</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div> 
</div>
<div class='mask hide'></div>
<div class='class-content hide' id="gym">
	<p class="class-title">待选课程</p>
	<div class="class-area standbyClass">
		<i data-name='ba'>BabiesA</i>
		<i data-name='bb'>BabiesB</i>
		<i data-name='tod'>Toddlers</i>
		<i data-name='run'>Runners</i>
		<i data-name='twos'>Twos</i>
	</div>
	<p class="class-title" style="color: #41a03b">已选课程</p>
	<div class="class-area class-choose"></div>
	<div class="class-confirm"><a href="javascript:;" class="class-confirm-btn">确认</a></div>
</div>
<div class='class-content hide' id="music">
	<p class="class-title">待选课程</p>
	<div class="class-area standbyClass">
		<i data-name='m1'>M1</i>
		<i data-name='m2'>M2</i>
		<i data-name='m3'>M3</i>
		<i data-name='rr'>Rhythm Roll</i>
	</div>
	<p class="class-title" style="color: #41a03b">已选课程</p>
	<div class="class-area class-choose"></div>
	<div class="class-confirm"><a href="javascript:;" class="class-confirm-btn">确认</a></div>
</div>
<div class='class-content hide' id="art">
	<p class="class-title">待选课程</p>
	<div class="class-area standbyClass">
		<i data-name='ae1'>AE1</i>
		<i data-name='ae2'>AE2</i>
		<i data-name='oe'>Oral English</i>
		<i data-name='sam'>Sailor-Aargh Mateys</i>
		<i data-name='dwr'>Dance With Rompy</i>
		<i data-name='cr'>Chef Rompy</i>
		<i data-name='gs'>Good Sports</i>
		<i data-name='ss'>Silly Science</i>
		<i data-name='ra'>Rompy Adventure</i>
		<i data-name='sh'>Superheroes</i>
		<i data-name='cj'>Construction Junction</i>
		<i data-name='aa'>All Aboard</i>
		<i data-name='ctc'>Crayons to Canvas</i>
		<i data-name='pr'>Princess</i>
		<i data-name='cra'>Chef Rompy Around the World</i>
	</div>
	<p class="class-title" style="color: #41a03b">已选课程</p>
	<div class="class-area class-choose"></div>
	<div class="class-confirm"><a href="javascript:;" class="class-confirm-btn">确认</a></div>
</div>
<script src="js/jq.js"></script>
<script src="js/avalon.js"></script>
<script src="js/main.js"></script>
<script src="js/calendar.js"></script>
<script>
(function() {
	var clickObj;
	var cDate;
	var sObj = {};
	var oldStandbyClass;
	var ids;

	//初始化日历
	var sDate = baseFunc.getStorageData("schedule");
	var testData = [];

	if(sDate) {
		for (var i = 0; i < sDate.length; i++) {
			testData.push({date: sDate[i].date, items: [{className:'已创建课表'}]});
		};
	}

	weeklyCalendar(testData,{
		clickDate: function (date) {
			cDate = date;
			sObj = {};
		},
		clickDownLoad: function (that) {
			console.log(that)
		}
	}, true);

	$(".current").trigger("click");

	var vm = avalon.define({
		$id: "main",
		allData: {},
	});
	
	$(".schedule-in").click(function() {
		var type = ids = $(this).attr("data-type");
		clickObj = $(this);//*重要*

		$(".mask").removeClass("hide");
		$("#" + type).removeClass("hide");
		oldStandbyClass = $("#" + type).find(".standbyClass").children().clone();
	});

	$(".standbyClass").click(function(e) {
		target = $(e.target);

		if(!target.hasClass("class-area")) {
			$(this).parent().find(".class-choose").append(target);
		}
	});

	$(".class-choose").click(function(e) {
		target = $(e.target);

		if(!target.hasClass("class-area")) {
			$(this).parent().find(".standbyClass").append(target);
		}
	});

	$(".mask").click(function() {
		$(".mask").addClass("hide");
		$(".class-content").addClass("hide");
	});

	$(".class-confirm-btn").click(function() {
		var statue = true,
			fullNameArr = [],
			classArr = [];

		$(".class-choose").find("i").each(function(i, elem) {
			if(i > 1) {
				baseFunc.alert("课程选择过多");
				statue = false;
			} else {
				classArr.push($(elem).attr("data-name"));
				fullNameArr.push($(elem).text());
			}
		});

		if(!statue) {
			return;
		}

		clickObj.text(fullNameArr).attr("data-class", classArr);
		$("#" + ids).find(".class-choose").find("i").remove();
		$("#" + ids).find(".standbyClass").find("i").remove();
		$("#" + ids).find(".standbyClass").append(oldStandbyClass);
		$(".mask").addClass("hide");
		$(".class-content").addClass("hide");

	});

	$("#addSubmit").click(function() {
		if(!cDate) {
			baseFunc.alert("请选择日期");
			return;
		}

		var scheduleData = sDate,
			ifSame = false;

		if(scheduleData) { //是否同一日期重复提交
			for(var i = 0; i < scheduleData.length; i++) {
				if(scheduleData[i]["date"] == cDate) {
					ifSame = true;
					break;
				}
			}
		}

		if(ifSame) {
			baseFunc.alert("已有课程");
			return;
		}

		sObj["date"] = cDate;
		sObj["info"] = [];

		$(".schedule-in").each(function(index, elem) {
			var text = $(elem).text(),
				classType =  $(elem).attr("data-type"),
				time =  $(elem).attr("data-time"),
				className =  $(elem).attr("data-class"),
				tempObj = {};

			if(className) {
				var moreClass = className.split(",");
				if(moreClass.length > 1) {
					var fullClassArr = text.split(",");
					for (var i = 0; i < moreClass.length; i++) {
						tempObj["classType"] = classType;
						tempObj["time"] = time;
						tempObj["className"] = moreClass[i];
						tempObj["classFullName"] = fullClassArr[i];
						sObj["info"].push(tempObj);
						tempObj = {};
					};
				} else {
					tempObj["classType"] = classType;
					tempObj["time"] = time;
					tempObj["className"] = className;
					tempObj["classFullName"] = text;
					sObj["info"].push(tempObj);
					tempObj = {};
				}
			}
		});

		if(sObj["info"].length > 0) {
			sObj.passStatus = false;
			baseFunc.setStorageData("schedule", sObj);
		} else {
			baseFunc.alert("请选择课程");
			return;
		}

		baseFunc.alert("课表添加成功", "green");
		$(".schedule-in").attr("data-class", "")
		$(".schedule-in").text("");
	});
})();
</script>
</body>
</html>